<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document1</title>
</head>
<body onload="todolist('all')">
    <div>
        <h1>待办事项清单</h1>
        <input name="name" type="radio" onchange=todolist('0')>未完成项
        <input name="name" type="radio" onchange=todolist('1')>已完成项
        <input name="name" type="radio" onchange=todolist('all') checked="checked">所有项<br/>
        <input type="text" placeholder="请添加新事项" style="width: 200px;" id="get">
        <button onclick="create()">+</button>
        <input type="text" id='list_title' placeholder="删除事项">
        <input type='submit' value="删除" onclick=del_title()>
        <ul id="box">

        </ul>
    </div>



    <script>
        function todolist(completed){
            fetch('/todo'+'?completed='+completed)
            .then(response => response.json())
            .then(data =>{
                var data1 = data.todo
                console.log(data1);
                document.getElementById("box").innerHTML=""
                for (var i = 0;i<data1.length;i++){
                    var op = '<li><input type="checkbox" name="'+data1[i].id+'"onchange="is_finish(this.name)"><span>'+data1[i].title+'</span></li>'
                    document.getElementById("box").innerHTML += op
                }
            })
        }
        function create(){
            var url = '/create_todo';
            var text1 = document.getElementById('get').value;
            var data = {title: text1};
            fetch(url, { method: 'POST', body: JSON.stringify(data), headers: new Headers({ 'Content-Type': 'application/json' }) })
            todolist('all')
        }/* 服务器的/create_todo改成.json*/

        function is_finish(id){
            fetch('/mark_completed'+'?id='+id)
                .then(res => res.json())
                .then(function(data){
                    if('title' in data){
                        todolist('all')
                    }
                })
        }
        function del_title(){
           title = document.getElementById('list_title').value;
           fetch('/del_title'+'?title='+title)
           .then(res=>res.json())
           .then(function(data){
                todolist('all');
           });
           }


        
        
        
        
        
        /*var url = '';
        var data = {title:"欢喜"};
        fetch(url,{
            method : 'POST',
            body : JSON.stringify(data),
            headers : new Headers({
                'Content-Type' : 'application/json'
            })
        }).then(res => res.json())
        .catch(error => console.error('Error:',error))
        .then(response => console.log('Success:',response));
        

        var url = '';
        var headers = {
            "Content-Type" : "application/x-www-form-urlencoded"
        }
        docu*/
    </script>


</body>
</html>